<template>
  <div class="about">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Home',
  // 钩子函数，页面加载完触发
  mounted() {
    let myecharts = document.getElementById('main')
    let myChart = echarts.init(myecharts, null, {
      width: 600,
      height: 400
    })
    let option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
          shadowBlur: 100,
          shadowColor: 'rgba(25, 100, 150, 0.5)',
          shadowOffsetY: 5,
        },
        label: {
          show: false,
          // 标签的文字。
          formatter: 'This is a normal label.'
        },
        // 高亮样式。
        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: 'blue'
          },
          label: {
            show: true,
            // 高亮时标签的文字。
            formatter: 'This is a emphasis label.'
          }
        }
      }]
    };
    myChart.setOption(option)

    window.onresize = function(){
      myChart.resize()   
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}
.a1 {
  width: 600px;
  height: 400px;
}
p {
  font-size: 1em;
  line-height: 1.5;
}
</style>